<template>
	<div class="hello">
		<div class="yutao-appbar" :class="{navhide:navHide}">

			<mu-appbar :title="htyy">
				<mu-icon-button icon="menu" slot="left" @click="toggle()" />
				<mu-text-field v-if="ispc" icon="search" class="appbar-search-field" slot="right" hintText="请输入搜索内容" />
				<mu-flat-button color="white" label="@YuTao" slot="right" />
			</mu-appbar>

		</div>
		<router-view class="yutao-content" :class="{navhide:navHide}"></router-view>

		<mu-drawer :docked="ok?true:false" :open="open" @close="toggle()" width=200>
			<mu-appbar title="目录" />
			<mu-list @change="handleListChange" :value="activeList">
				<mu-list-item title="Python爬虫" value="list1" toggleNested :open="true">
					<mu-icon slot="left" value="send" />

					<mu-list-item slot="nested" title="创建爬虫" value="list2" toggleNested :open="true">
						<mu-icon slot="left" value="looks_one" />
						<mu-list-item slot="nested" title="初见网络爬虫" value="list3" to="/py1_1" @click="itemclick('初见网络爬虫')">
							<mu-icon slot="left" value="filter_1" />
						</mu-list-item>
						<mu-list-item slot="nested" title="复杂HTML解析" value="list4" to="/py1_2" @click="itemclick('复杂HTML解析')">
							<mu-icon slot="left" value="filter_2" />
						</mu-list-item>
						<mu-list-item slot="nested" title="开始采集" value="list5" to="/py1_3" @click="itemclick('开始采集')">
							<mu-icon slot="left" value="filter_3" />
						</mu-list-item>
						<mu-list-item slot="nested" title="使用API" value="list6" to="/py1_4" @click="itemclick('使用API')">
							<mu-icon slot="left" value="filter_4" />
						</mu-list-item>
						<mu-list-item slot="nested" title="存储数据" value="list7" to="/py1_5" @click="itemclick('存储数据')">
							<mu-icon slot="left" value="filter_5" />
						</mu-list-item>
						<mu-list-item slot="nested" title="读取文档" value="list8" to="/py1_6" @click="itemclick('读取文档')">
							<mu-icon slot="left" value="filter_6" />
						</mu-list-item>
					</mu-list-item>

					<mu-list-item slot="nested" title="高级数据采集" value="list9" toggleNested :open="false">
						<mu-icon slot="left" value="looks_two" />
						<mu-list-item slot="nested" title="数据清洗" value="list10" to="/py2_1" @click="itemclick('数据清洗')">
							<mu-icon slot="left" value="filter_1" />
						</mu-list-item>
						<mu-list-item slot="nested" title="自然语言处理" value="list11" to="/py2_2" @click="itemclick('自然语言处理')">
							<mu-icon slot="left" value="filter_2" />
						</mu-list-item>
						<mu-list-item slot="nested" title="穿越网页表单与登录窗口进行采集" value="list12" to="/py2_3" @click="itemclick('穿越网页表单与登录窗口进行采集')">
							<mu-icon slot="left" value="filter_3" />
						</mu-list-item>
						<mu-list-item slot="nested" title="采集JavaScript" value="list13" to="/py2_4" @click="itemclick('采集JavaScript')">
							<mu-icon slot="left" value="filter_4" />
						</mu-list-item>
						<mu-list-item slot="nested" title="图像识别与文字处理" value="list14" to="/py2_5" @click="itemclick('图像识别与文字处理')">
							<mu-icon slot="left" value="filter_5" />
						</mu-list-item>
						<mu-list-item slot="nested" title="避开采集陷阱" value="list15" to="/py2_6" @click="itemclick('避开采集陷阱')">
							<mu-icon slot="left" value="filter_6" />
						</mu-list-item>
						<mu-list-item slot="nested" title="用爬虫测试网站" value="list16" to=/py2_7 @click="itemclick('用爬虫测试网站')">
							<mu-icon slot="left" value="filter_7" />
						</mu-list-item>
						<mu-list-item slot="nested" title="远程采集" value="list17" to="/py2_8" @click="itemclick('远程采集')">
							<mu-icon slot="left" value="filter_8" />
						</mu-list-item>
					</mu-list-item>

				</mu-list-item>

				<mu-list-item title="flutter" toggleNested value="list18" :open="false">
					<mu-icon slot="left" value="send" />
					<mu-list-item slot="nested" title="浅尝flutter中的flex布局" value="list19" to="/flutterflex" @click="itemclick('浅尝flutter中的flex布局')">
						<mu-icon slot="left" value="filter_1" />
					</mu-list-item>
					<mu-list-item slot="nested" title="浅尝flutter中的3D效果" value="list20" to="/flutter3d" @click="itemclick('浅尝flutter中的3D效果')">
						<mu-icon slot="left" value="filter_2" />
					</mu-list-item>
					<mu-list-item slot="nested" title="浅尝flutter中的http请求" value="list21" to="/flutterhttp" @click="itemclick('浅尝flutter中的http请求')">
						<mu-icon slot="left" value="filter_3" />
					</mu-list-item>
					<mu-list-item slot="nested" title="浅尝flutter中的动画（淡入淡出）" value="list22" to="/flutteranimation" @click="itemclick('浅尝flutter中的动画（淡入淡出）')">
						<mu-icon slot="left" value="filter_4" />
					</mu-list-item>
				</mu-list-item>

				<mu-list-item title="JavaScript" toggleNested value="list22" :open="false">
					<mu-icon slot="left" value="send" />
					<mu-list-item slot="nested" title="入门级的vue-ssr例子（NUXT）" value="list23" to="/js1_1" @click="itemclick('入门级的vue-ssr例子（NUXT）')">
						<mu-icon slot="left" value="filter_1" />
					</mu-list-item>
					<mu-list-item slot="nested" title="AngularJs 用户输入动态模板XSS攻击" value="list24" to="/js1_2" @click="itemclick('AngularJs 用户输入动态模板XSS攻击')">
						<mu-icon slot="left" value="filter_1" />
					</mu-list-item>
					<mu-list-item slot="nested" title="Hybrid小技巧：通过js调用原生对话框(Android)" value="list25" to="/js1_3" @click="itemclick('AHybrid小技巧：通过js调用原生对话框(Android)')">
						<mu-icon slot="left" value="filter_1" />
					</mu-list-item>
				</mu-list-item>

				<mu-list-item title="Android" toggleNested value="list26" :open="false">
					<mu-icon slot="left" value="send" />
					<mu-list-item slot="nested" title="一个大型新闻app的骨架（android）" value="list27" to="/android1_1" @click="itemclick('一个大型新闻app的骨架（android）')">
						<mu-icon slot="left" value="filter_1" />
					</mu-list-item>

				</mu-list-item>

				<mu-list-item title="杂七杂八" toggleNested value="list26" :open="false">
					<mu-icon slot="left" value="send" />
					<mu-list-item slot="nested" title="python+java+flutter+bootstrap的大数据采集及分析。。" value="list27" to="/zqzb1_1" @click="itemclick('python+java+flutter+bootstrap的大数据采集及分析。')">
						<mu-icon slot="left" value="filter_1" />
					</mu-list-item>

				</mu-list-item>
			</mu-list>
		</mu-drawer>
	</div>
</template> 
       
<script>
import flutterFlex from '../markdown/flutterFlex.md'
import VueMarkdown from 'vue-markdown'
import FlutterFlex from './flutter/FlutterFlex.vue'

export default {
	name: 'HelloWorld',
	data() {
		return {
			open: true,
			screenWidth: document.body.clientWidth,
			navHide: false,
			ok: true,
			flutterFlexs: '',
			activeTab: 'tab1',
			activeList: 'list1',
			htyy: 'YuTao带你学爬虫',
			ispc: true

		}
	},
	created() {
		this.flutterFlexs = flutterFlex;
		if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
			console.log('移动端');
			this.ispc = false
		} else {
			this.ispc = true
			console.log('pc端');
		}
	},
	methods: {
		toggle() {
			console.log(typeof (flutterFlex))
			if (this.screenWidth > 768) {
				this.open = !this.open;
				this.navHide = !this.navHide
			} else {
				this.open = !this.open;

			}
		},


		 handleTabChange (val) {
			this.activeTab = val
			console.log("handle0" + val)
		},
		handleListChange(val) {
			console.log("handlelist" + val)
			this.activeList = val
		},
		itemclick(val) {
			this.htyy = val;
			if (navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPod/i) || navigator.userAgent.match(/BlackBerry/i) || navigator.userAgent.match(/Windows Phone/i)) {
				this.open = false
				console.log('移动端');
			} else {
				console.log('pc端');
				this.open = true
			}
		}
	},
	mounted() {
		if (this.screenWidth < 768) {
			this.open = false;
			this.ok = false
			this.navHide = true
		} else {
			this.open = true
			this.ok = true
			this.navHide = false
		}
		const that = this
		window.onresize = () => {
			return (() => {
				window.screenWidth = document.body.clientWidth
				that.screenWidth = window.screenWidth
			})()
		}
	},
	watch: {
		screenWidth(val) {

			if (!this.timer) {
				this.screenWidth = val
				this.timer = true
				let that = this
				setTimeout(function () {
					console.log(that.screenWidth)
					if (that.screenWidth < 768) {
						that.open = false
						that.ok = false
						that.navHide = true
						that.ispc = false
					} else {
						that.open = true;
						that.navHide = false
						that.ok = true
						that.ispc = true
					}
					that.timer = false
				}, 400)
			}
		}
	},
	components: {
		FlutterFlex
	}
	// components: {
	// 	VueMarkdown
	// }

}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
.yutao-appbar {
  position: fixed;
  left: 200px;
  right: 0;
  top: 0;
  width: auto;
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
@media (max-width: 768px) {
  .yutao-appbar {
    left: 0;
  }
}
.yutao-appbar.navhide {
  left: 0;
}
.yutao-content {
  padding-top: 56px;
	padding-left: 220px;
	padding-right: 20px;
  -webkit-transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
  transition: all 0.45s cubic-bezier(0.23, 1, 0.32, 1);
}
.yutao-content.navhide {
  padding-left: 20px;
}
@media (min-width: 480px) {
  .yutao-content {
    padding-top: 65px;
  }
}
</style>
<style lang="less">
.yutao-appbar .appbar-search-field {
  color: #fff;
  margin-bottom: 0;
  &.focus-state {
    color: #fff;
  }
  .mu-text-field-hint {
    color: fade(#fff, 54%);
  }
  .mu-text-field-input {
    color: #fff;
  }
  .mu-text-field-focus-line {
    background-color: #fff;
  }
}
.yutao-content {
  max-width: 900px;
  blockquote {
    padding: 1px 0 1px 20px;
    margin-bottom: 25px;
    background-color: #f7f7f7;
    border-left: 6px solid #b4b4b4;
    word-break: break-word !important;
    word-break: break-all;
    font-size: 16px;
    font-weight: 400;
    // line-height: 30px;
    margin: 20px 0 20px 0;
  }
  img {
    display: block;
    margin: 0 auto;
  }
}
#app .breadcrumb {
  margin: 15px 0 0 20px;
}
.hello .mu-item-left {
  left: 12px;
}
.hello .mu-item-left,
.hello .mu-item-right {
  width: 25px;
}
.hello .mu-item.show-left {
  padding-left: 40px;
}
.hello .mu-icon {
  font-size: 25px;
  cursor: inherit;
}
.hello .mu-item-title {
  font-size: 14px;
}
</style>

